<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="/css/filter.css" />	
	<title>滤芯状态</title>
</head>
<body>
    <!--page-->
    <!-- 调用滤芯剩余百分比数值 -->
    <input type="hidden" value="{{ $state['filter1'] or 0}}" class="percents percent1" />
	<input type="hidden" value="{{ $state['filter2'] or 0}}" class="percents percent2" />
	<input type="hidden" value="{{ $state['filter3'] or 0}}" class="percents percent3" />
	<input type="hidden" value="{{ $state['filter4'] or 0}}" class="percents percent4" />
	<input type="hidden" value="{{ $state['filter5'] or 0}}" class="percents percent5" />
	<section class="filterPage pages">
        <!--top-->
		<section class="top">
			<a class="returnBtn" href="/device/1508/state">&lt; 返回</a>
			<section class="filterTitle">滤芯</section>
		</section>
        <!-- content -->
		<section class="content">
			<section class="filterBox">
				<section class="fullColor">
					<section class="fullColorBox"></section>
				</section>
			</section>
            <section class="bubble1"></section>
            <section class="bubble2"></section>
            <section class="resetBtn"></section>
            <section class="filterList">
		        <div class="circles">
		            <div class="first circle">
		                <strong></strong>
		                <span>1</span>
		            </div> 
		            
		            <div class="second circle">
		                <strong></strong>
		                <span>2</span>
		            </div>

		            <div class="third circle">
		                <strong></strong>
		                <span>3</span>
		            </div>

		            <div class="forth circle">
		                <strong></strong>
		                <span>4</span>
		            </div>
		            <div class="five circle">
		                <strong></strong>
		                <span>5</span>
		            </div>
		        </div>
			</section>
		</section>
	</section>
	<!-- 确认取消提示start -->
	<section class="undbing_bg">
		<section class="undbing_box">
			<p>确定要立即复位吗？</p>
			<section style="margin-top: 3.5rem">
				<a class="no_btn" >取消</a>
				<a class="yes_btn">确定</a>
			</section>
		</section>
	</section>
	<!-- 提交信息服务器反馈提示信息-->
	<section class="hint_bg">
		<section class="hint_box">
			<p class="hint_text" style="margin-top: 2.5rem;"></p>
			<section class="hint_btn" style="margin: 2rem auto;">确定</section>
		</section>
	</section>
	<!-- 滤芯提醒弹框设置-->
	<section class="hint_bg1">
		<section class="hint_box1">
			<p class="hint_text1" style="margin-top: 2.5rem;"></p>
			<section class="hint_btn1" style="margin: 2rem auto;">确定</section>
		</section>
	</section>
	<script src="/js/jquery.min.js"></script>
	<script src="/js/public.js"></script>
	<script src="/js/circle-progress1508.js"></script>
	<script src="/js/socket.io.js"></script>
	<script>
		window.onload=function(){
			//点击滤芯后再复位
			$(".resetBtn").click(function(){
				hint("请先选择一个要复位的滤芯！");
			})
			//判断滤芯颜色显示
			var percent1Val=$(".percent5").val();
			if(percent1Val==0){
	            $(".fullColorBox").css("height","100%")
	            $(".fullColorBox").css("backgroundColor","#6FC49B");
	        }else if(percent1Val<80){
	        	$(".fullColorBox").css("backgroundColor","#6FC49B");
	        	$(".fullColorBox").height(parseInt(100-parseInt($(".percent1").val()))+"%");
	        }else if(percent1Val<90){
	        	$(".fullColorBox").css("backgroundColor","#F6931E");
	        	$(".fullColorBox").height(parseInt(100-parseInt($(".percent1").val()))+"%");
	        }else if(percent1Val<100){
	        	$(".fullColorBox").css("backgroundColor","#F05A25");
	        	$(".fullColorBox").height(parseInt(100-parseInt($(".percent1").val()))+"%");
	        }else if(percent1Val==100){
	        	$(".fullColorBox").css("height","5px");
	        	$(".fullColorBox").css("backgroundColor","#F00");
	        }
		    //点击滤芯
		    $(".circle").click(function(){
		        $(".filterTitle").html("滤芯"+($(this).index()+1));
			    var percentNum=parseInt($(".percents").eq($(this).index()).val());	
		        if(percentNum==0){
		            $(".fullColorBox").height("100%")
		            $(".fullColorBox").css("backgroundColor","#6FC49B");
		        }else if(percentNum<80){
		        	$(".fullColorBox").css("backgroundColor","#6FC49B");
		        	$(".fullColorBox").height(parseInt(100-percentNum)+"%");
		        }else if(percentNum<90){
		        	$(".fullColorBox").css("backgroundColor","#F6931E");
		        	$(".fullColorBox").height(parseInt(100-percentNum)+"%");
		        }else if(percentNum<100){
		        	$(".fullColorBox").css("backgroundColor","#F05A25");
		        	$(".fullColorBox").height(parseInt(100-percentNum)+"%");
		        }else if(percentNum==100){
		        	$(".fullColorBox").height("5px");
		        	$(".fullColorBox").css("backgroundColor","#F00");
		        }
		        var i=$(this).index()+1;
		        $(".resetBtn").unbind('click').click(function(){
		            $('.undbing_bg').show();
		            $('.undbing_bg').height($(window).height());
		            $('.no_btn').unbind('click').click(function(){
		                $('.undbing_bg').hide();
		            });
		            $('.yes_btn').unbind('click').click(function(){
		                $.ajax({
		                    url:"/api/device/{{ $type }}/control",
		                    type:"post",
		                    data:{command:"reset_filter", num:i},
		                    success:function(data){
		                        $('.undbing_bg').hide();
		                        $('.filter_bg').hide();
		                        if(data.status.errCode == 0){
		                            hint("操作成功！");
		                            setTimeout(function(){
		                            	$(".hint_bg").hide();
		                            },3000);
		                        }else
		                        {
		                            hint("操作失败，请重新操作或联系售后人员！");
		                            setTimeout(function(){
		                            	$(".hint_bg").hide();
		                            },3000);
		                        }
		                    }
		                });
		            });
		        });
		    });
		};
		//滤芯提醒弹框设置
		var filterNum1="",Num1,filterNum2="",Num2,filterNum3="",Num3;
		for(var j=0;j<$(".percents").size();j++){
			if($(".percents").eq(j).val()<90){
				if($(".percents").eq(j).val()>80){
					filterNum1=filterNum1+"滤芯"+parseInt(j+1)+"使用寿命超过80%、<br/>";
					Num1=parseInt(j+1);
				}
			}else if($(".percents").eq(j).val()<100){
				if($(".percents").eq(j).val()>=90){
					filterNum2=filterNum2+"滤芯"+parseInt(j+1)+"使用寿命超过90%、<br/>";
					Num2=parseInt(j+1);
				}
			}else if($(".percents").eq(j).val()==100){
				filterNum3=filterNum3+"滤芯"+parseInt(j+1)+"使用寿命达到100%、<br/>";
				Num3=parseInt(j+1);
			}
		};
		if(Num1>1||Num1==1){
			filterNum1=filterNum1;
		}
		if(Num2>1||Num2==1){
			filterNum2=filterNum2;
		}
		if(Num3>1||Num3==1){
			filterNum3=filterNum3;
		}
		if(filterNum1!=""||filterNum2!=""||filterNum1!=""){
			hint1(filterNum1+filterNum2+filterNum3+"请及时更换滤芯。");
		}
		//异步传输数据
	    // var i=0;
	    filterFn();
	    var socket = io('{{ $host }}:6001');
	    socket.on('filter-{{ $state['deviceCode'] }}:App\\Events\\DeviceFilterInfoUpdate', function(message){
	    	// console.log(message);
	        if($(".percent1").val()!=message.deviceData['filter1']||
	    		$(".percent2").val()!=message.deviceData['filter2']||
	    		$(".percent3").val()!=message.deviceData['filter3']||
	    		$(".percent4").val()!=message.deviceData['filter4']||
	    		$(".percent5").val()!=message.deviceData['filter5']){
		        $(".percent1").val(message.deviceData['filter1']);
		        $(".percent2").val(message.deviceData['filter2']);
		        $(".percent3").val(message.deviceData['filter3']);
		        $(".percent4").val(message.deviceData['filter4']);
		        $(".percent5").val(message.deviceData['filter5']);
		        filterFn();
		        //测试显示滤芯值
		        $(".filterVal1").val(message.deviceData['filter1']);
		        $(".filterVal2").val(message.deviceData['filter2']);
		        $(".filterVal3").val(message.deviceData['filter3']);
		        $(".filterVal4").val(message.deviceData['filter4']);
		        $(".filterVal5").val(message.deviceData['filter5']);
	    	}
	    	// i=0;
		})	
	</script>
</body>
</html>
